import { Link } from '@brillout/docpress'

Upon <Link href="/client-routing">client-side navigation</Link>,
Vike retrieves certain server-side `pageContext` properties by sending an HTTP request to your server.

```shell
# Retrieve data fetched on the server-side
HTTP GET /product/42/index.pageContext.json
```

Most notably, the returned `pageContext` object includes data fetched via <Link href="/data#environment">`+data` on the server-side</Link>.

> If the server-side doesn't fetch data, then the client-side skips making a `pageContext.json` request, see <Link href="#avoid-pagecontext-json-requests" />.

> See also: <Link href="/pageContext#lifecycle" />.


## Example

```ts
// /pages/star-wars/+data.server.ts

export { data }
export type Data = Awaited<ReturnType<typeof data>>

// This data() hook is always called on the server-side. But, upon page navigation, the data
// needs to be available on the client-side thus Vike makes a /star-wars/index.pageContext.json
// request in order to pass the data from the server to the client.
async function data() {
  const response = await fetch('https://star-wars.brillout.com/api/films.json')
  const movies = await response.json()
  return { movies }
}
```
The request `/star-wars/index.pageContext.json` returns the data fetched by the `data()` hook.

```bash
$ curl /star-wars/index.pageContext.json
{
  "data": {
    "movies": [
      {
        "title": "A New Hope",
        "release_date": "1977-05-25"
      },
      {
        "title": "The Empire Strikes Back",
        "release_date": "1980-05-17"
      },
      {
        "title": "Return of the Jedi",
        "release_date": "1983-05-25"
      }
    ]
  }
}
```

## Avoid `pageContext.json` requests

If you want to minimize requests made to your server, then you may want Vike to stop making `pageContext.json` requests.

> Most commonly, if the data you fetch comes from another server, then you typically don't want to make an unnecessary detour over your JavaScript/SSR server.

Vike makes a `pageContext.json` request for a page if and only if one of the two following conditions is true:
- The page has a server-only `data()`, `onCreatePageContext()`, or `onBeforeRender()` hook.
  > See also:
  > - <Link href="/data#environment" />
  > - <Link href="/onBeforeRender#environment" />
  > - <Link href="/onCreatePageContext" />
  > - <Link href="/pageContext#lifecycle" />
- The `pageContextInit` at <Link href="/renderPage">`renderPage()`</Link> contains a property that is included in <Link href="/passToClient">`passToClient`</Link>.
  ```ts
  // Vike server middleware
  async (req: Request, res: Response) => {
    const pageContextInit = {
      urlOriginal: req.originalUrl,
      // If passToClient contains 'user' then Vike makes a pageContext.json request
      // upon page navigation in order the retrieve the pageContextInit.user value.
      user: req.user
    }
    const pageContext = await renderPage(pageContextInit)
    return pageContext.httpResponse
  }
  ```

If both conditions are false, then Vike won't make any `pageContext.json` request.

See also:
- [#2566 - New setting `.once.js` e.g. `+data.once.js`](https://github.com/vikejs/vike/issues/2566)
- [#2561 - New setting `requestPageContext: boolean`](https://github.com/vikejs/vike/issues/2561)


## See also

- <Link href="/passToClient" />
- <Link href="/pageContext#lifecycle" />
- <Link href="/data#environment" />
- <Link href="/onBeforeRender#environment" />
